<template>
  <div style="position: relative;">
    <no-ssr>
      <header :class="['header', fixedHeader ? 'header-fixed' : '']">
        <div :class="['header-container']">
          <div class="header-logo">
            <img v-lazy="web_info.COMPANY_LOGO" :key="web_info.COMPANY_LOGO" />
          </div>
          <div class="menu">
            <div
              class="menu-item"
              :class="nav_active === 'index' ? 'active' : ''"
              @click="toggleMenu('index')"
            >
              首页
            </div>
            <!-- <div
              class="menu-item"
              :class="nav_active === 'information' ? 'active' : ''"
              @click="toggleMenu('information')"
              v-if="kl_md.KLCGBG == 1"
            >
              指导中心
            </div> -->
            <!-- <div
              class="menu-item"
              :class="nav_active === 'certificate' ? 'active' : ''"
              @click="toggleMenu('certificate')"
              v-if="kl_md.KLZSCL == 1"
            >
              证书查询
            </div> -->
            <div class="menu-item classify-nav">
              <span>{{kl_md.KLCGBG == 1 ? '课题库' : '课程分类'}}</span>
              <div class="classify">
                <div class="left">
                  <ul>
                    <li
                      v-for="(i, x) in major_tree"
                      :key="`sub${x}`"
                      @click.stop="handleClick(i.id)"
                      @mouseenter="handleMouse('enter', x, major_tree.length)"
                    >
                      {{ i.name }}
                    </li>
                  </ul>
                </div>
                <div class="right">
                  <div
                    class="nav-sub"
                    v-for="(i, x) in major_tree"
                    :key="`sub_contant${x}`"
                    :id="`sub_contant${x}`"
                    @mouseleave="handleMouse('leave', x, major_tree.length)"
                  >
                    <div
                      class="nav-item"
                      v-for="(i2, x2) in i.treeNode"
                      :key="`sub_contant_second${x2}`"
                    >
                      <div
                        class="title"
                        :style="{
                          width: i2.treeNode.length == 0 ? '100%' : '80px'
                        }"
                        @click.stop="handleClick(i2.id)"
                      >
                        {{ i2.name }}
                      </div>
                      <div class="nav-content" v-if="i2.treeNode.length > 0">
                        <span
                          v-for="(i3, x3) in i2.treeNode"
                          :key="`sub_contant_second${x3}`"
                        >
                          <span>|</span>
                          <span
                            class="nav-sub-line"
                            @click.stop="handleClick(i3.id)"
                            >{{ i3.name }}</span
                          >
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
     <!--       <div
              class="menu-item"
              :class="nav_active === 'teacher-settled' ? 'active' : ''"
              @click="toggleMenu('teacher-settled')"
              v-if="kl_md.KLJSRZ == 1"
            >
              教师入驻
            </div> -->
            <!-- <div
              class="menu-item"
              :class="nav_active === 'school' ? 'active' : ''"
              @click="toggleMenu('school')"
              v-if="kl_md.KLYXK == 1 && false"
            >
              院校库
            </div> -->
            <!-- <div
              class="menu-item"
              :class="nav_active === 'question-bank' ? 'active' : ''"
              @click="toggleMenu('question-bank')"
              v-if="kl_md.KLXBTK == 1"
            >
              题库
            </div> -->
						<div
						  class="menu-item"
						>
						  <a :href="web_info.ANDROID_APP_URL" download>APP下载</a>
						</div>
          </div>
          <div
            class="search"
            @mouseleave="is_show_content = false"
            @mouseenter="is_show_content = true"
          >
            <i-input
              placeholder="请输入课程名称"
              v-model="search_word"
              @on-change="getSearch"
              @on-focus="is_show_content = true"
            >
            </i-input>
            <div class="content" v-if="is_show_content">
              <div
                class="search-item"
                v-for="(item, index) in formatNumber"
                :key="index"
                @click="toCourseDetail('/coursedetail?id=' + item.id)"
              >
                <span>{{ item.courseName }}</span>
              </div>
              <div
                v-if="formatNumber.length == 0"
                style="text-align:center;padding:20px 0;cursor: text;"
              >
                空
              </div>
            </div>
          </div>
          <div class="lang-select-box" v-if="kl_md.KLGJH == 1">
            <Select
              :value="locale"
              size="small"
              style="width:100px"
              v-show="is_client_locale == '1'"
              @on-change="handleChangeLang"
            >
              <Option
                v-for="item in locales"
                :value="item.code"
                :key="item.code"
                >{{ item.lang }}</Option
              >
            </Select>
          </div>
          <div
            class="user-box"
            v-if="!token && Object.keys(user_info).length == 0"
          >
            <div class="login" @click="$router.push('/login')">
              <img class="user-login" src="/img/pc/user-login.png" alt="" />
              <span>登录</span>
            </div>
            <div>|</div>
            <div class="register" @click="$router.push('/regist')">注册</div>
          </div>
          <div
            class="user-info"
            v-if="token && Object.keys(user_info).length > 0"
          >
            <div
              class="user-name"
              @click="$router.push('/personal?action=user_information')"
            >
              <div class="user-logo">
                <img v-lazy="user_info.avatar" :key="user_info.avatar" alt="" />
                <div class="member-logo" v-show="isMember">
                  <img src="/img/pc/member.png" alt="" />
                </div>
              </div>
              
              <div class="my-name">{{ user_info.acName }}</div>
              <div class="user-list">
                <!-- <div class="list-item">学习进度</div> -->
                <div
                  class="list-item"
                  @click.stop="$router.push('/personal?action=test_analysis')"
                  v-if="kl_md.KLXBTK != 1 && kl_md.KLDLTK != 1"
                >
                  考试分析
                </div>
                <div
                  class="list-item"
                  @click.stop="
                    $router.push('/personal?action=user_information')
                  "
                >
                  个人信息
                </div>
                <div
                  class="list-item"
                  @click.stop="$router.push('/personal?action=message_center')"
                >
                  消息中心
                </div>
                <div
                  class="list-item"
                  @click.stop="$router.push('/personal?action=my_account')"
                >
                  账户中心
                </div>

                <!-- <div class="list-item">
                  <img class="list-item-logo" src="/img/pc/download.png" alt="">
                  下载中心
                </div> -->
                <!-- <div class="list-item" v-if="kl_md.KLHY == 1 && Object.keys(member_info).length > 0 && member_info.isOpenMember === 1" @click.stop="$router.push('/vip_member')"><img class="list-item-logo-one" src="/img/pc/member-info.png" alt=""><img class="list-item-logo-two" src="/img/pc/member-info1.png" alt="">会员中心</div> -->
                <div class="list-item" @click.stop="handleLogout">
                  退出登录
                </div>
              </div>
            </div>
            <div
              class="my-classroom"
            >
              <img class="user-login" src="/img/pc/my-classroom.png" alt="" />
              <span @click="$router.push('/classroom?action=ongoing')"
                >{{kl_md.KLCGBG == 1 ? "我的微科研" : "我的教室"}}</span
              >
              <div class="user-list">
                <div
                  class="list-item"
                  @click="$router.push('/classroom?action=ongoing')"
                >
                  正在进行
                </div>
                <div
                  class="list-item"
                  @click="$router.push('/classroom?action=mycourse')"
                >
                  我的课程
                </div>
                <div
                  class="list-item"
                  @click="$router.push('/classroom?action=myachievements')"
                  v-if="kl_md.KLCGBG == 1"
                >
                  成果报告
                </div>
                <div
                  class="list-item"
                  @click="$router.push('/classroom?action=mytask')"
                  v-if="kl_md.KLZYGL == 1"
                >
                  我的作业
                </div>
                
                <div
                  class="list-item"
                  @click="$router.push('/classroom?action=mytest')"
                  v-if="kl_md.KLXBTK == 1"
                >
                  我的考试
                </div>
                <div
                  class="list-item"
                  @click="$router.push('/classroom?action=myquestion')"
                  v-if="kl_md.KLXBTK == 1"
                >
                  我的题库
                </div>
                <div
                  class="list-item"
                  @click="$router.push('/classroom?action=mycollection')"
                >
                  我的收藏
                </div>
                <div
                  class="list-item"
                  @click="$router.push('/classroom?action=mycertificate')"
                  v-if="kl_md.KLZSCL == 1"
                >
                  我的证书
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div v-if="isShowMemberDialog" class="member-dialog">
        <div class="member-box">
          <div class="member-left">
            <div class="member-header">
              <Icon
                class="close"
                size="20"
                color="#ffffff"
                @click="closeMemberDialog"
                type="md-close"
              />
              <div class="member-user">
                <div class="author"></div>
                <span class="name">{{ user_info.acName }}</span>
                <span class="account">（ 账号：{{ user_info.account }} ）</span>
              </div>
              <div
                class="member-btn-list"
                :class="[
                  member_active === 'one'
                    ? 'one'
                    : member_active === 'two'
                    ? 'two'
                    : member_active === 'three'
                    ? 'three'
                    : ''
                ]"
              >
                <div class="member-btn-item" @click="memberHandle('one')">
                  <img
                    v-if="member_active != 'one'"
                    src="/img/pc/member-one.png"
                    alt=""
                  />
                  <img v-else src="/img/pc/member-one-active.png" alt="" />
                  <span :class="[member_active === 'one' ? 'active' : '']">{{
                    member_info.smallMemberName
                  }}</span>
                </div>
                <div class="member-btn-item" @click="memberHandle('two')">
                  <img
                    v-if="member_active != 'two'"
                    src="/img/pc/member-two.png"
                    alt=""
                  />
                  <img v-else src="/img/pc/member-two-active.png" alt="" />
                  <span :class="[member_active === 'two' ? 'active' : '']">{{
                    member_info.middleMemberName
                  }}</span>
                </div>
                <div class="member-btn-item" @click="memberHandle('three')">
                  <img
                    v-if="member_active != 'three'"
                    src="/img/pc/member-three.png"
                    alt=""
                  />
                  <img v-else src="/img/pc/member-three-active.png" alt="" />
                  <span :class="[member_active === 'three' ? 'active' : '']">{{
                    member_info.highMemberName
                  }}</span>
                </div>
              </div>
            </div>
            <div class="member-content" v-if="member_active === 'one'">
              <div class="content-title">
                <img src="/img/pc/member-xin.png" alt="" />
                <span>尊享特权</span>
              </div>
              <div class="content-list" v-if="memberList.length > 0">
                <p
                  v-for="(item, index) in memberList[0].introduction"
                  :key="index"
                >
                  {{ item }}
                </p>
              </div>
              <div class="content-price">
                <div
                  :class="['price-item', priceActive === 1 ? 'active' : '']"
                  @click="priceBtnHandle(1)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price"
                    >￥{{ member_info.smallMemberMonth }}</span
                  >
                  <span class="hr">/</span>
                  <span class="date">月卡</span>
                </div>
                <div
                  :class="['price-item', priceActive === 2 ? 'active' : '']"
                  @click="priceBtnHandle(2)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price"
                    >￥{{ member_info.smallMemberQuarter }}</span
                  >
                  <span class="hr">/</span>
                  <span class="date">季卡</span>
                </div>
                <div
                  :class="['price-item', priceActive === 3 ? 'active' : '']"
                  @click="priceBtnHandle(3)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price">￥{{ member_info.smallMemberYear }}</span>
                  <span class="hr">/</span>
                  <span class="date">年卡</span>
                </div>
                <div
                  :class="['price-item', priceActive === 4 ? 'active' : '']"
                  @click="priceBtnHandle(4)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price"
                    >￥{{ member_info.smallMemberForever }}</span
                  >
                  <span class="hr">/</span>
                  <span class="date">终身卡</span>
                </div>
              </div>
            </div>
            <div class="member-content" v-if="member_active === 'two'">
              <div class="content-title">
                <img src="/img/pc/member-xin.png" alt="" />
                <span>尊享特权</span>
              </div>
              <div class="content-list" v-if="memberList.length > 0">
                <p
                  v-for="(item, index) in memberList[1].introduction"
                  :key="index"
                >
                  {{ item }}
                </p>
              </div>
              <div class="content-price">
                <div
                  :class="['price-item', priceActive === 5 ? 'active' : '']"
                  @click="priceBtnHandle(5)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price"
                    >￥{{ member_info.middleMemberMonth }}</span
                  >
                  <span class="hr">/</span>
                  <span class="date">月卡</span>
                </div>
                <div
                  :class="['price-item', priceActive === 6 ? 'active' : '']"
                  @click="priceBtnHandle(6)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price"
                    >￥{{ member_info.middleMemberQuarter }}</span
                  >
                  <span class="hr">/</span>
                  <span class="date">季卡</span>
                </div>
                <div
                  :class="['price-item', priceActive === 7 ? 'active' : '']"
                  @click="priceBtnHandle(7)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price"
                    >￥{{ member_info.middleMemberYear }}</span
                  >
                  <span class="hr">/</span>
                  <span class="date">年卡</span>
                </div>
                <div
                  :class="['price-item', priceActive === 8 ? 'active' : '']"
                  @click="priceBtnHandle(8)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price"
                    >￥{{ member_info.middleMemberForever }}</span
                  >
                  <span class="hr">/</span>
                  <span class="date">终身卡</span>
                </div>
              </div>
            </div>
            <div class="member-content" v-if="member_active === 'three'">
              <div class="content-title">
                <img src="/img/pc/member-xin.png" alt="" />
                <span>尊享特权</span>
              </div>
              <div class="content-list" v-if="memberList.length > 0">
                <p
                  v-for="(item, index) in memberList[2].introduction"
                  :key="index"
                >
                  {{ item }}
                </p>
              </div>
              <div class="content-price">
                <div
                  :class="['price-item', priceActive === 9 ? 'active' : '']"
                  @click="priceBtnHandle(9)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price">￥{{ member_info.highMemberMonth }}</span>
                  <span class="hr">/</span>
                  <span class="date">月卡</span>
                </div>
                <div
                  :class="['price-item', priceActive === 10 ? 'active' : '']"
                  @click="priceBtnHandle(10)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price"
                    >￥{{ member_info.highMemberQuarter }}</span
                  >
                  <span class="hr">/</span>
                  <span class="date">季卡</span>
                </div>
                <div
                  :class="['price-item', priceActive === 11 ? 'active' : '']"
                  @click="priceBtnHandle(11)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price">￥{{ member_info.highMemberYear }}</span>
                  <span class="hr">/</span>
                  <span class="date">年卡</span>
                </div>
                <div
                  :class="['price-item', priceActive === 12 ? 'active' : '']"
                  @click="priceBtnHandle(12)"
                >
                  <img class="buy-active" src="/img/pc/buy-active.png" alt="" />
                  <span class="price"
                    >￥{{ member_info.highMemberForever }}</span
                  >
                  <span class="hr">/</span>
                  <span class="date">终身卡</span>
                </div>
              </div>
            </div>
            <div class="content-hr"></div>
            <div class="member-footer">
              <div class="footer-left">
                <p class="left-title">请选择支付方式扫码支付</p>
                <div class="left-buy">
                  <div class="buy-item">
                    <img src="/img/pc/weixin.png" alt="" />
                    <span>微信支付</span>
                    <div
                      class="buy-btn"
                      :class="[buy_active === 'weixin' ? 'active' : '']"
                      @click="buyBtnHandle('weixin')"
                    ></div>
                  </div>
                  <div class="buy-item">
                    <img src="/img/pc/zhifubao.png" alt="" />
                    <span>支付宝支付</span>
                    <div
                      class="buy-btn"
                      :class="[buy_active === 'zhifubao' ? 'active' : '']"
                      @click="buyBtnHandle('zhifubao')"
                    ></div>
                  </div>
                </div>
                <div class="left-agreement">
                  <img src="/img/pc/agreement.png" alt="" />
                  <span>购买即同意，请认真阅读《</span>
                  <span class="agreement">北京泓深会员服务协议</span>
                  <span>》</span>
                </div>
              </div>
              <div class="footer-right"></div>
            </div>
          </div>
          <div class="member-right"></div>
        </div>
      </div>
      <div v-if="isShowIntentionSchool" class="intention_dialog">
        <div class="intention_box">
          <h2 class="intention_title">完善信息</h2>
          <div class="intention_form">
            <Form ref="intentionForm" :model="intentionForm" :rules="intentionRule" :label-width="90">
              <FormItem label="当前年级：" prop="gradeId">
                  <Select v-model="intentionForm.gradeId" placeholder="请选择当前年级">
                      <Option :value="item.id" v-for="(item,index) in gradeList" :key="item.id">{{item.name}}</Option>
                  </Select>
              </FormItem>
              <FormItem label="报考院校：" prop="schoolCollegeId">
                  <Select v-model="intentionForm.schoolCollegeId" placeholder="请选择报考院校">
                      <Option :value="item.id" v-for="(item,index) in schoolList" :key="item.id">{{item.name}}</Option>
                  </Select>
              </FormItem>
            </Form>
            <div class="intention_submit" @click="intentionFormSubmit('intentionForm')">提交</div>
          </div>
        </div>
      </div>
    </no-ssr>
    <!-- <div class="regist">
      <div class="regist-box">
        <Regist></Regist>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { userLogout,getGradeSchoolList, updateGradeSchoolInfo } from "~/api/account/user.js";
import { getCourse } from "~/api/course";
import {
  getMemberConfig,
  buyMember,
  getMember,
  getMemberList
} from "~/api/member";
import Regist from "~/components/pc/Regist";
export default {
  components: {
    Regist
  },
  data() {
    return {
      isShowMemberDialog: false,
      is_show_nav: false,
      is_show_content: false,
      nav_active: "",
      search_word: "",
      origin_refs_offset_height: [],
      config: {
        nav_list: [
          {
            name: this.$t("locale.components.pc.Header.t10"),
            href: "/index",
            path: "index"
          },
          {
            name: this.$t("locale.components.pc.Header.t11"),
            path: "index",
            is_hidden_hover: true,
            treeNode: true
          },
          // {
          //   name: "我的考试",
          //   href: "/test_train",
          //   path: "test_train"
          // },
          {
            name: this.$t("locale.components.pc.Header.t12"),
            href: "/test_train",
            path: "test_train"
          }
        ]
      },
      formatNumber: [], //搜索结果
      member_info: null,
      isOpenMember: false,
      member_active: "one",
      buy_active: "weixin",
      priceActive: 1,
      memberList: [],
      isMember: null,
      member: null,
      intentionForm: {
        gradeId: null,
        schoolCollegeId: null
      },
      intentionRule:{
        gradeId: [
            { required: true, type: 'number', message: '请选择当前年级', trigger: 'change' }
        ],
        schoolCollegeId: [
            { required: true, type: 'number', message: '请选择报考院校', trigger: 'change' }
        ],
      },
      gradeList:[],
      schoolList:[],
      flag:false,
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      login_type(state) {
        return state.login_type;
      },
      web_info(state) {
        return state.web_info;
      },
      major_tree(state) {
        return state.major_tree;
      },
      locales(state) {
        return state.locales;
      },
      locale(state) {
        return state.locale;
      },
      is_client_locale(state) {
        return state.is_client_locale;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),
    current() {
      return this.$route.name;
    },
    fixedHeader() {
      return this.$route.meta.fixedHeader;
    },
    isShowIntentionSchool(){
      if (
        this.token &&
        Object.keys(this.user_info).length > 0 &&
        !this.user_info.gradeId && !this.user_info.schoolCollegeId &&
        this.kl_md.KLYXRZ == 1
      ) {
        return true;
      }else{
        return false;
      }
    },
  },
  created() {
    // console.log(this.$route);
    if (process.client) {
      this.$nextTick(() => {
        this.getData();
        if (this.token && Object.keys(this.user_info).length > 0) {
          this.getMember();
          this.getGradeSchoolList();
        }

        this.nav_active = this.$route.path.replace("/", "");
        // this.getSubContantHeight();
        Object.keys(this.$refs).map((i, x) => {
          if (this.$refs[i][0] !== undefined && /sub_nav_container/.test(i)) {
            let origin_offset_height = this.$refs[i][0].scrollHeight;
            this.origin_refs_offset_height = {
              ...this.origin_refs_offset_height,
              [i]: Math.ceil(origin_offset_height)
            };
          }
        });
      });
    }
  },
  watch: {
    priceActive() {
      this.getBuyQrcode();
    },
    major_tree() {
      if (process.client) {
        this.$nextTick(() => {
          // this.getSubContantHeight();
          Object.keys(this.$refs).map((i, x) => {
            if (this.$refs[i][0] !== undefined && /sub_nav_container/.test(i)) {
              let origin_offset_height = this.$refs[i][0].scrollHeight;
              this.origin_refs_offset_height = {
                ...this.origin_refs_offset_height,
                [i]: Math.ceil(origin_offset_height)
              };
            }
          });
        });
      }
    }
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    ...mapActions(["initUser"]),
    intentionFormSubmit(name){
      this.$refs[name].validate(async (valid) => {
          if (valid) {
              if(this.flag){
                  return;
              }
              this.flag = true;
              this.SET_IS_LOADING(true);
              let params = {
                  id:this.user_info.id,
                  ...this.intentionForm
              }
              let result = await updateGradeSchoolInfo(params);
              if (result && result.data && result.data.code == 200) {
                  this.flag = false;
                  this.initUser();
                  this.$Message.success('提交成功');
              } else {
                this.$Message.error("提交失败");
              }
              this.SET_IS_LOADING(false);
          } else {
              
          }
      })
    },
    async getGradeSchoolList() {
      this.SET_IS_LOADING(true);
      let result = await getGradeSchoolList();
      if (result && result.data && result.data.code == 200) {
        this.gradeList = result.data.data.grades;
        this.schoolList = result.data.data.schoolColleges;
      } else {
        // this.$Message.error("获取失败");
      }
      this.SET_IS_LOADING(false);
    },
    toCourseDetail(path) {
      this.$router.push(path);
      this.is_show_content = false;
      // console.log(path)
    },
    getBuyQrcode() {
      // console.log("请求支付二维码");
    },
    priceBtnHandle(type) {
      this.priceActive = type;
    },
    buyBtnHandle(type) {
      this.buy_active = type;
    },
    memberBtn() {
      this.isShowMemberDialog = true;
      this.getBuyQrcode();
      this.getMemberList();
    },
    closeMemberDialog() {
      this.isShowMemberDialog = false;
    },
    memberHandle(type) {
      this.member_active = type;
      if (type === "one") {
        this.priceActive = 1;
      } else if (type === "two") {
        this.priceActive = 5;
      } else if (type === "three") {
        this.priceActive = 9;
      }
    },
    async getMember() {
      let result = await getMember(this.user_info.id);
      if (result && result.data && result.data.code == 200) {
        this.isMember = !!result.data.data;
        this.member = result.data.data;
      } else {
        
      }
    },
    async getMemberList() {
      let result = await getMemberList();
      // console.log("会员特权简介", result);
      if (result && result.data && result.data.code == 200) {
        // result.data.data
        // console.log(result.data.data.rows.map(item=>{return {...item,introduction:JSON.parse(item.introduction)}}));
        this.memberList = result.data.data.rows.map(item => {
          return { ...item, introduction: JSON.parse(item.introduction) };
        });
      } else {
        
      }
    },
    async getData() {
      let result = await getMemberConfig();
      // console.log("会员配置信息", result);
      if (result && result.data && result.data.code == 200) {
        this.member_info = result.data.data;
        this.isOpenMember = result.data.data.isOpenMember === 1 ? true : false;
      } else {
        
      }
    },
    toggleMenu(path) {
      this.$router.push("/"+path);
      this.nav_active = path;
    },
    toggleNav() {
      this.is_show_nav = !this.is_show_nav;
    },
    preventDefault(e) {
      e.preventDefault();
      return false;
    },
    linkTo(path) {
      this.$router.push({
        path
      });
    },
    handleChangeLang(lang) {
      this.$store.commit("SET_LANG", lang);
    },
    handleNavMouse(type, ref) {
      if (type == "enter") {
        // this.$refs[ref][0].style.height =
        //   this.origin_refs_offset_height[ref] + "px";
      } else if (type == "leave") {
        // this.$refs[ref][0].style.height = 0;
      }
    },
    handleMouse(type, index, length) {
      if (type == "enter") {
        for (let i = 0; i < length; i++) {
          document.getElementById([`sub_contant${i}`]).style.display = "none";
        }
        document.getElementById([`sub_contant${index}`]).style.display =
          "block";
      } else if (type == "leave") {
        document.getElementById([`sub_contant${index}`]).style.display = "none";
      } else if (type == "all") {
        for (let i = 0; i < length; i++) {
          document.getElementById([`sub_contant${i}`]).style.display = "none";
        }
      }
    },
    async handleLogout() {
      this.$Modal.confirm({
        title: this.$t("locale.components.pc.Header.t13"),
        content: this.$t("locale.components.pc.Header.t14"),
        onOk: async () => {
          let params = {};
          if (this.login_type == "email") {
            params = {
              email: this.user_info.email
            };
          } else if (this.login_type == "mobile") {
            params = {
              account: this.user_info.mobile
            };
          } else {
            params = {
              account: this.user_info.account
            };
          }
          let result = await userLogout(params);
          if (result && result.data.code === 200) {
            this.$store.commit("SIGN_OUT");
            this.$Message.success(this.$t("locale.components.pc.Header.t15"));
            this.$router.push("/login");
          } else {
            this.$Message.error(this.$t("locale.components.pc.Header.t16"));
          }
        },
        onCancel: () => {
          // this.$Message.info("取消操作");
        }
      });
    },
    async getSearch() {
      let result = await getCourse({
        keyword: this.search_word
      });
      if (result && result.data.code === 200) {
        this.formatNumber = result.data.data.rows;
      } else {
        // console.log("请求失败！");
      }
    },
    handleClick(id) {
      // console.log("执行2");
      this.nav_active = "";
      if (this.$route.path == "/classify") {
        this.$router.replace("/classify?id=" + id);
      } else {
        this.$router.push("/classify?id=" + id);
      }
    },
    onSearch() {}
  }
};
</script>

<style lang="scss">
@import "@/assets/css/root.scss";
// @import "@/assets/css/iview.scss";
.header {
  position: relative;
  z-index: 999;
  width: 100%;
  height: 70px; /*no*/
  background-color: #f7f9fa;
  box-shadow: 0px 3px 32px 0px rgba(74, 82, 95, 0.18);
  .lang-select-box {
    margin: 0px 12px 0px 0px;
  }
  .header-container {
    width: 1200px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-logo {
      width: 302px;
      margin-right: 8px;
      height: 60px;
      // background: #000;
      overflow: hidden;
      display: flex;
      align-items: center;
      > img {
        display: block;
      }
    }
    .menu {
      // margin: 0 30px;
      display: flex;
      .menu-item {
        // width: 88px;
        padding: 0 12px;
        // padding: 0 30px;
        padding: 0 18px;
        height: 70px;
        line-height: 70px;
        // text-align: center;
        font-size: 16px;
        color: #5f6366;
        cursor: pointer;
        position: relative;
      }
      .menu-item.active {
        // width: 88px;
        height: 70px;
        // background-color: var(--theme-color);
        color: var(--theme-color);
        font-size: 16px;
        // color: #fdfdfd;
      }
      .menu-item:hover {
        // background-color: var(--theme-color);
        color: var(--theme-color);
        font-size: 16px;
        // color: #fdfdfd;
        .classify {
          .left {
            display: block;
          }
        }
      }
      .classify {
        position: absolute;
        left: 0;
        background: #ffffff;
        line-height: 1;
        // width: 144px;
        // width: 700px;
        // height: 400px;
        height: 530px;
        display: flex;
        box-shadow: 0px 3px 43px 0px rgba(32, 40, 56, 0.25);
        border-radius: 2px 2px 0px 0px;
        z-index: 3;
        .left {
          display: none;
          // width: 20%;
          width: 134px;
          height: 100%;
          // width: 100%;
          color: #656a73;
          // overflow: auto;
          overflow: hidden;
          font-size: 14px;
          background: #edeef0;
          ul {
            width: 144px;
            height: 100%;
            overflow: auto;
            &::-webkit-scrollbar {
              /*滚动条整体样式*/
              width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
              // height: 1px;
            }
            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: #cdced1;
            }
            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              background: #f1f1f1;
            }
          }

          // font-family: "Microsoft YaHei","黑体","宋体",sans-serif;
          ul > li {
            text-align: center;
            height: 62px;
            line-height: 62px;
            position: relative;
          }
          ul > li:hover {
            background: #ffffff;
            color: var(--theme-color);
            // color: #5b96ff;
          }
          // .active{
          //   background: #ffffff;
          //   color: #5b96ff;
          //   position: relative;
          // }
          // .active::before{
          //   content: "";
          //   position: absolute;
          //   display: block;
          //   left: 0;
          //   top: 50%;
          //   width: 4px;
          //   height: 20px;
          //   margin-top: -10px;
          //   background-color: #5b96ff;
          // }
          ul > li:hover::before {
            content: "";
            position: absolute;
            display: block;
            left: 0;
            top: 50%;
            width: 4px;
            height: 20px;
            margin-top: -10px;
            // background-color: #5b96ff;
            background-color: var(--theme-color);
          }
        }
        .left:hover + .right {
          display: block;
        }
        .left:hover {
          width: 144px;
          // overflow: auto;
        }
        .right:hover {
          display: block;
        }

        .right {
          display: none;
          width: 556px;
          height: 530px;
          border-radius: 2px 2px 0px 0px;
          .nav-sub {
            width: 100%;
            height: 100%;
            overflow: auto;
            color: #000;
            border-radius: 2px 2px 0px 0px;
            padding: 40px 30px;
            box-sizing: border-box;
            &::-webkit-scrollbar {
              /*滚动条整体样式*/
              width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
              // height: 1px;
            }
            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: #cdced1;
            }
            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              background: #f1f1f1;
            }
            .nav-item {
              display: flex;
              margin-bottom: 18px;
              // align-items: center;
              .title {
                width: 80px;
                line-height: 1.5;
                font-size: 14px;
                color: #707680;
                margin-right: 12px;
              }
              .title:hover {
                text-decoration: underline;
                color: var(--theme-color);
              }
              .nav-content {
                line-height: 1.8;
                width: 380px;
                font-size: 12px;
                color: #aaadb2;
                margin: 0 10px;
                .nav-sub-line {
                  margin: 0 8px;
                }
                .nav-sub-line:hover {
                  text-decoration: underline;
                  color: var(--theme-color);
                }
              }
            }
          }
        }
        // .right{
        //   width: 80%;
        // }
      }
      .classify:hover {
        .left {
          width: 144px;
        }
      }
    }
    .search {
      width: 240px;
      height: 40px;
      border-radius: 20px;
      position: relative;
      .ivu-input {
        height: 40px;
        border-radius: 20px;
        padding-right: 20px;
        padding-left: 34px;
      }
      .ivu-input-prefix i,
      .ivu-input-suffix i {
        line-height: 40px;
      }
      // 取消鼠标点击动画效果
      .ivu-input:focus {
        outline: none;
        border-color: var(--theme-color);
        box-shadow: none;
      }
      // 取消鼠标悬停效果
      .ivu-input:hover {
        box-shadow: none;
      }
      .content {
        position: absolute;
        left: 22px;
        z-index: 999;
        width: 258px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        max-height: 300px;
        overflow: auto;
        .search-item {
          cursor: pointer;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          padding: 10px 10px;
          font-size: 14px;
          color: #666;
        }
        .search-item:hover {
          color: var(--theme-color);
        }
        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
          // height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #a8a8a8;
        }
        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          background: #f1f1f1;
        }
      }
    }
    .search::before {
      content: "";
      display: block;
      position: absolute;
      background-image: url("/img/pc/search.png");
      left: 8px;
      top: 9px;
      width: 22px;
      height: 22px;
      z-index: 99;
      // background: red;
    }
    .user-box {
      display: flex;
      color: #777c80;
      font-size: 16px;
      align-items: center;
      width: 200px;
      justify-content: flex-end;
      .login,
      .register {
        margin: 0 10px;
        cursor: pointer;
      }
      .login:hover,
      .register:hover {
        color: var(--theme-color);
      }
      .login {
        position: relative;
        > img {
          position: absolute;
          left: -22px;
          top: 0;
          display: block;
          background: var(--theme-color);
        }
      }
    }
    .user-info {
      display: flex;
      color: #777c80;
      font-size: 16px;
      align-items: center;
      width: 260px;
      // justify-content: flex-end;
      .user-name,
      .my-classroom {
        width: 130px;
        // margin: 0 10px;
        cursor: pointer;
      }
      .user-name:hover,
      .my-classroom:hover {
        color: var(--theme-color);
      }
      .user-name {
        position: relative;
        height: 70px;
        line-height: 70px;
        
        .my-name {
          position: relative;
          left: 46px;
          width: 78px;
          height: 100%;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .user-list {
          display: none;
          position: absolute;
          // top: 44px;
          left: 0;
          width: 220px;
          background-color: #ffffff;
          border-radius: 4px;
          overflow: hidden;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
          .list-item {
            height: 54px;
            line-height: 54px;
            text-align: center;
            font-size: 16px;
            color: #5b6069;
            position: relative;
            .list-item-logo-one {
              position: absolute;
              left: 50px;
              top: 50%;
              display: block;
              margin-top: -11px;
              background: var(--theme-color);
            }
            .list-item-logo-two {
              position: absolute;
              left: 50px;
              top: 50%;
              display: none;
              margin-top: -11px;
              background: var(--theme-color);
            }
          }
          .list-item:hover {
            background-color: var(--theme-color);
            color: #ffffff;
            .list-item-logo-one {
              display: none;
            }
            .list-item-logo-two {
              display: block;
            }
          }
        }
        .user-logo {
          position: absolute;
          top: 10px;
          left: 0px;
          width: 40px;
          height: 40px;
          .member-logo {
            position: absolute;
            left: 28px;
             top: 26px;
            height: 14px;
            width: 14px;
            line-height: 14px;
            background: var(--theme-color);
            text-align: center;
            border-radius: 50%;
            border: 1px solid #fff;
          }
          img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
          }
        }
      }
      .my-classroom:hover,
      .user-name:hover {
        .user-list {
          display: block;
        }
      }
      .my-classroom {
        position: relative;
        margin-left: 30px;
        height: 70px;
        line-height: 70px;
        > img {
          position: absolute;
          left: -22px;
          top: 24px;
          display: block;
          background-color: var(--theme-color);
        }
        .user-list {
          display: none;
          position: absolute;
          // top: 44px;
          left: -110px;
          width: 220px;
          background-color: #ffffff;
          border-radius: 4px;
          overflow: hidden;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
          .list-item {
            height: 54px;
            line-height: 54px;
            text-align: center;
            font-size: 16px;
            color: #5b6069;
          }
          .list-item:hover {
            background-color: var(--theme-color);
            color: #ffffff;
          }
        }
      }
    }
  }
}
.intention_dialog{
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  &::-webkit-scrollbar {
    width: 0 !important;
  }
  &::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
  .intention_box{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 700px;
    height: 310px;
    background-color: #ffffff;
    border-radius: 5px;
    .intention_title{
      text-align: center;
      font-size: 20px;
      line-height: 60px;
      // color: #000;
      letter-spacing: 2px;
    }
    .intention_form{
      width: 400px;
      margin: 30px auto 0;
    }
    .intention_submit{
      width: 100%;
      height: 40px;
      background: var(--theme-color);
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      margin: 40px auto 0;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
.member-dialog {
  width: 100%;
  height: auto;
  z-index: 99999999;
  padding-bottom: 60px;
  padding-top: 80px;
  position: fixed;
  top: 0;
  bottom: 0;
  // overflow-y: scroll;
  overflow-x: hidden;
  background: rgba(0, 0, 0, 0.2);
  &::-webkit-scrollbar {
    width: 0 !important;
  }
  &::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
  .member-box {
    margin: 0 auto;
    width: 920px;
    min-height: 720px;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    .member-left {
      display: block;
      // position: absolute;
      // top: 0;
      // left: 0;
      // width: 920px;
      // min-height: 720px;
      // background: aqua;
      // transition: left .2s;
      .member-header {
        width: 100%;
        height: 166px;
        // background-color: #313233;
        background-image: url("/img/pc/member-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .close {
          position: absolute;
          cursor: pointer;
          right: 14px;
          top: 14px;
        }
        .member-user {
          padding: 50px 0 0 40px;
          display: flex;
          align-items: center;
          .author {
            width: 46px;
            height: 46px;
            background-color: #c6c8cc;
            border: solid 2px #daa249;
            border-radius: 50%;
          }
          .name {
            font-size: 16px;
            font-weight: bold;
            color: #fbd395;
            margin: 0 10px;
          }
          .account {
            font-size: 16px;
            font-weight: bold;
            font-stretch: normal;
            color: #cacbcc;
          }
        }
        .member-btn-list {
          position: absolute;
          left: 0;
          bottom: 0;
          display: flex;
          width: 100%;
          height: 49px;
          .member-btn-item {
            cursor: pointer;
            width: 33.333333333333333%;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              display: block;
            }
            span {
              font-size: 18px;
              font-weight: bold;
              line-height: 18px;
              color: #ffffff;
            }
            span.active {
              font-size: 18px;
              // font-weight: bold;
              line-height: 18px;
              color: #b36f41;
            }
          }
        }
        .member-btn-list.one {
          background-image: url("/img/pc/member-one-bg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .member-btn-list.two {
          background-image: url("/img/pc/member-two-bg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .member-btn-list.three {
          background-image: url("/img/pc/member-three-bg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      .member-content {
        padding: 20px 40px;
        box-sizing: border-box;
        .content-title {
          display: flex;
          align-items: center;
          img {
            display: block;
          }
          span {
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
            color: #313233;
          }
        }
        .content-list {
          font-size: 14px;
          font-weight: bold;
          line-height: 18px;
          color: #313233;
        }
        .content-price {
          margin: 40px 0;
          display: flex;
          justify-content: space-between;
          .price-item {
            position: relative;
            cursor: pointer;
            width: 180px;
            height: 110px;
            border: solid 1px #c6c8cc;
            line-height: 110px;
            text-align: center;
            .price {
              font-size: 24px;
              font-weight: bold;
              color: #c56e35;
            }
            .hr {
              font-size: 24px;
              font-weight: bold;
              color: #7c7d80;
            }
            .date {
              font-size: 16px;
              font-weight: bold;
              color: #7c7d80;
            }
            .buy-active {
              display: none;
              position: absolute;
              right: -14px;
              bottom: -14px;
            }
          }
          .price-item.active {
            background-image: linear-gradient(-45deg, #f1c277 0%, #fae8cb 100%),
              linear-gradient(#5b6069, #5b6069);
            background-blend-mode: normal, normal;
            border: solid 1px #daa249;
            .price {
              color: #85583a;
            }
            .hr {
              color: #c69e6f;
            }
            .date {
              color: #c69e6f;
            }
            .buy-active {
              display: block;
            }
          }
        }
      }
      .content-hr {
        width: 920px;
        height: 1px;
        background-color: #e9edf5;
      }
      .member-footer {
        padding: 30px 40px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .footer-left {
          width: 700px;
          .left-title {
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
            color: #4a4b4d;
          }
          .left-buy {
            display: flex;

            .buy-item {
              display: flex;
              align-items: center;
              .buy-btn {
                cursor: pointer;
                width: 17px;
                height: 17px;
                background-color: #dadde0;
                border: solid 1px #7c7e7f;
                border-radius: 50%;
              }
              .buy-btn.active {
                background-color: #dbb06d;
                border: solid 1px #b48a49;
              }
              img {
                display: block;
              }
              span {
                margin: 35px 30px 35px 14px;
                font-size: 16px;
                font-weight: bold;
                line-height: 18px;
                color: #4a4b4d;
              }
              width: 50%;
            }
          }
          .left-agreement {
            font-size: 14px;
            font-weight: bold;
            color: #939599;
            display: flex;
            align-items: center;
            img {
              display: block;
            }
            .agreement {
              color: var(--theme-color);
              cursor: pointer;
            }
          }
        }
        .footer-right {
          width: 126px;
          height: 126px;
          background-color: #c6c8cc;
        }
      }
    }
    .member-left.active {
      display: none;
      // left: -920px;
    }
    .member-left.active + .member-right {
      display: block;
      // left: 0px;
    }
    .member-right {
      display: none;
      // position: absolute;
      // top: 0;
      // left: 920px;
      // width: 920px;
      // min-height: 720px;
      // background: red;
      // transition: left .2s;
    }
  }
}
.regist {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999999999;
  .regist-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 800px;
    height: 600px;
    background-color: #ffffff;
    border-radius: 20px;
  }
}
.header.header-fixed {
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0px 3px 32px 0px rgba(74, 82, 95, 0.18);
}
</style>
